<!--
 * @Author: chenzhinjian
 * @Description: 
 * @Date: 2019-04-11 21:23:15
 * @LastEditTime: 2019-04-16 23:07:21
 -->
<template>
    <div :class="classs" v-show="isShowConfirm" :data-transfer="transfer"
        v-transfer-dom>
      <transition name="ifast-maskIn">
        <div :class="masks" :style="zindex" v-show="isShowConfirm" @click="masksClick"></div>
      </transition>
      <transition name="ifast-masContent">
        <!-- ifast-confirm-center -->
        <div :class="contents " v-if="isShowConfirm" :style='widths' >
          <div :class="heardClass">
            <div :class="heardTitleClass">
              <slot name="header">
                <div v-html="title"></div>
              </slot>
              <Icon class="float-right" :type="closeIcon" @click="iconClick"></Icon>
            </div>
          </div>
          <div :class="bodyClass">
            <slot name="body">
              <div v-html="content"></div>
            </slot>
          </div>
          <div :class="footerClass" v-if="footerHide">
            <slot name=footer>
                  <ButtonGroup class="float-right ">
                    <Button @click="cancel">{{cancelText}}</Button>
                    <Button type="primary" @click="confirm">{{okText}}</Button>
                </ButtonGroup>
            </slot>
            
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
let prefixCls='ifast'
import Icon from '../icon/icon'
import Button from '../button/button'
import ButtonGroup from '../button/button-group'
import TransferDom from '../../directives/transfer-dom.js'

export default {
  name: 'Confirm',
  components:{Icon,Button,ButtonGroup},
  directives:{TransferDom},
  props:{
    value:{
      type:Boolean,
      default:false
    },
    transfer: {
      type: Boolean,
      default: true
    },
    closeIcon:{
      type:String,
      default:'ion-ios-close-empty'
    },
    okText: {
        type: String,
        default:'确定'
    },
    cancelText: {
        type: String,
        default:'取消'
    },
     footerHide: {
        type: Boolean,
        default: true
    },
    maskClosable:{
      type:Boolean,
      default:true
    },	
    autoColse:{
      type:Boolean,
      default:false
    },
    closeOnConfirm:{
      type:Boolean,
      default:true
    },
    showCancelButton:{
      type:Boolean,
      default:true
    },
    showConfirmButton:{
      type:Boolean,
      default:true
    },
    width:{
      type:[String,Number],
      default:520
    },
    height:{
      type:[String,Number],
      default:0
    },
    hideOnBlur:{
      type:Boolean,
      default:false
    },
    title:{
      type:String
    },
    content:{
      type:String
    },
    verticalCenter:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    classs(){
      return [
        `${prefixCls}-mask-box`,
      ]
    },
    widths(){
      let obj={};
      let width=this.width.toString().indexOf('%')==-1?Number(this.width)+'px':this.width.replace("%","");
      let height=Number(this.height);
      obj.width=width;
      obj['z-index'] = 1010 + this.tIndex;
      if(height){
        obj.height=this.height+'px';
      }
      return obj
    },
    masks(){
      return[
        `${prefixCls}-mask`,
      ]
    },
    contents(){
      return[
        `${prefixCls}-confirm-content`,
        [
          {
            [`${prefixCls}-confirm-center`]:this.verticalCenter,
          }
        ]
      ]
    },
    heardClass(){
      return[
        `${prefixCls}-head`,
      ]
    },
    heardTitleClass(){
      return[
        `${prefixCls}-head-title`,
      ]
    },
    bodyClass(){
      return[
        `${prefixCls}-confirm-body`
      ]
    },
    footerClass(){
      return[
        `${prefixCls}-confirm-footer`,
        'clearfix'
      ]
    },
    zindex(){
      let styles = {};
      styles['z-index'] = 1010 + this.tIndex;
      return styles;
    }
  },
  data () {
    return {
      isShowConfirm:this.value,
      tIndex:0,
    }
  },
  mounted(){
  },
  methods: {
    iconClick(){
      this.hide();
    },
    masksClick(){
      if(this.maskClosable){
        this.hide();
      }
    },
    cancel(){
      this.$emit('onCancel')
      this.hide();
    },
    confirm(){
      this.$emit('onConfirm')
      if(this.closeOnConfirm){
        this.hide();
      }
    },
    hide(){
      this.isShowConfirm=!this.isShowConfirm;
      this.$emit('input',false)
    }
  },
  watch:{
    value(nVal,oldVal){
      this.isShowConfirm=nVal;
      if(nVal){
        this.tIndex=this.tIndex+1;
      }
    },
    isShowConfirm(nVal){
      if(nVal){
        this.tIndex=this.tIndex+1;
      }
    }
  }
}
</script>